Skip to main content

UI Logic

Not all logical functions can be represented through SourceLinks and Clipboards. Therefore, we can define the UI logic using JavaScript snippets. Under UI logic, we find an overview of all the code files in the project. Through the code files, we can edit created event functions or define new global functions.

Topbar​

The topmost element is the topbar. On the left side, you will find options to change the project name (double-clicking on the project name opens an in-place edit), save the current state of your project (2), or save the project under a different name (3).

On the right side, you can adjust breakpoints to test various device resolutions (4), start the preview (5), or launch the project as a web app (6).

UILogicExplorer

Explorer​

In the Explorer, you will find a list of code files. Each code file contains a function that can be utilized by the interface. In the global section, you can define your own global functions. To do this, create a code file folder using the Add button and add your code files to the folder.

On the global level, you may also find other sections. When an event function is created for a component through the Detail Panel, a section is created with the main container name, and a code file is added in a group with the component id. This allows all event functions of a component to be easily found.

UILogicTopbarr

Snippet Editor​

When a code file is selected, the function header and body are displayed in the editor.

Global Functions​

For self-defined functions, the arguments can be freely defined. Global functions are loaded as scripts in the header and are therefore accessible from any event function.

Event Functions​

For event functions, the arguments are fixed. The following arguments are passed to each event function:

  • apiObject
    A collection of useful functions.
  • component
    Interface object for the current component configuration.
  • eventData
    Data provided during the event.